<template>
  <view v-if="shenheStatus == 0" class="page">
    <u-sticky :h5-nav-height="0">
      <view class="search">
        <u-search
          @search="clearData"
          :show-action="false"
          placeholder="请输入订单号搜索"
          v-model="order_no"
        ></u-search>
      </view>
      <view class="menu">
        <view
          :class="[
            'item',
            send_type == item.id ? 'active' : '',
            'item' + index
          ]"
          v-for="(item, index) of statusList"
          :key="item.id"
          @click="handle('change', 'send_type', item.id)"
        >
          {{ item.title }} {{ getData("send_type", item.id) }}</view
        >
      </view>
    </u-sticky>

    <view class="list">
      <view class="item" v-for="item of list" :key="item.id">
        <view class="hd">
          <view class="order-no">订单编号：{{ item.order_no }}</view>
          <view
            :class="[
              'tag',
              parseFloat(item.price_wait) < 0.01 == '1' ? '' : 'active'
            ]"
            >{{
              parseFloat(item.price_wait) < 0.01 ? "已返利" : "待返利"
            }}</view
          >
        </view>

        <view class="bd">
          <view class="bd-item">
            <view class="title">待返类型</view>
            <view class="num">{{ getType(item.send_type) }}</view>
          </view>
          <view class="bd-item">
            <view class="title">待返{{ getType(item.send_type) }}</view>
            <view class="num">{{ item.price_wait }}</view>
          </view>
          <view class="bd-item">
            <view class="title">已返{{ getType(item.send_type) }}</view>
            <view class="num">{{ item.price_send }}</view>
          </view>
          <view class="bd-item">
            <view class="title">加速比例</view>
            <view class="num">{{ item.add_rat }}%</view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import { orderRebateSelfOrder } from "../api/index";
import toolsMore from "@/components/tools/tools-more.vue";

export default {
  components: { Shenhe, toolsMore },
  data() {
    return {
      list: [],
      moreStatus: 1,
      page: 1,
      isEnd: false,
      order_no: "",
      send_type: "-1",

      statusList: [
        { id: "-1", title: "全部" },
        { id: "3", title: "余额返利", num: 0 },
        { id: "2", title: "积分返利", num: 0 },
        { id: "1", title: "佣金返利", num: 0 }
      ],
      total: null
    };
  },

  onLoad() {
    this.clearData();
  },

  computed: {
    getData() {
      return (type, id) => {
        let { total } = this;
        if (!total) return "";

        if (type == "send_type") {
          switch (id) {
            case "1":
              return `(${total.price.num})`;
            case "2":
              return `(${total.jifen.num})`;
            case "3":
              return `(${total.jifen.num})`;
            default:
              return "";
          }
        } else {
        }
      };
    },

    getType() {
      return (params) => {
        switch (String(params)) {
          case "1":
            return "佣金";
          case "2":
            return "积分";
          case "3":
            return "余额";
          default:
            return "";
        }
      };
    }
  },

  methods: {
    handle(type, item, params) {
      switch (type) {
        case "change":
          this[item] = params;
          this.clearData();
          break;

        default:
          break;
      }
    },

    clearData() {
      this.page = 1;
      this.isEnd = false;
      this.list = [];
      this.getList();
    },

    async getList() {
      let { list: oldList, page, order_no, send_type } = this;
      this.moreStatus = 2;

      const res = await orderRebateSelfOrder(
        {
          page,
          order_no,
          send_type
        },
        true
      );
      uni.stopPullDownRefresh();
      this.moreStatus = 1;

      if (res.code == 0) {
        this.total = res.total;
        let { list, totalCount } = res.data,
          count = parseInt(totalCount);
        if (list.length) {
          oldList.push(...list);
          this.page = page + 1;
        }
        if (oldList.length >= count) {
          this.isEnd = true;
          this.moreStatus = 3;
        }
      }
    }
  },
  onReachBottom() {
    if (this.isEnd) {
      return;
    }

    this.getList();
  },

  onPullDownRefresh() {
    this.getLocation();
  }
};
</script>

<style lang="scss" scoped>
.search {
  padding: 20rpx 24rpx;
  background: #fff;
}

.menu {
  display: flex;
  background: #fff;

  .item {
    position: relative;
    text-align: center;
    padding: 22rpx 0 24rpx;
    font-size: 28rpx;
    flex: 1;
    color: #262626;

    &.item0 {
      padding: 22rpx 24rpx 24rpx;
      flex: none;
    }

    &.active {
      color: #f0250e;
      font-weight: bold;
    }

    &.active:after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      margin-left: -20rpx;
      width: 40rpx;
      height: 6rpx;
      background: #f0250e;
    }
  }
}

.page {
  min-height: 100vh;
  background: #f2f2f2;
}

.list {
  padding: 24rpx 24rpx;

  .item {
    margin-bottom: 24rpx;
    padding: 24rpx;
    background: #fff;
    border-radius: 20rpx;
    font-size: 26rpx;
  }

  .hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 28rpx;
  }

  .order-no {
    color: #262626;
    font-weight: bold;
  }

  .tag {
    color: #8c8c8c;
    &.active {
      color: #f0250e;
    }
  }

  .bd {
    display: flex;
    padding: 24rpx 0;
    background: #fafafa;
    border-radius: 20rpx;
  }

  .bd-item {
    flex: 1;
    overflow: hidden;
    text-align: center;

    .title {
      font-size: 24rpx;
      color: #8c8c8c;
    }

    .num {
      font-size: 30rpx;
      color: #262626;
      font-weight: bold;
    }
  }
}
</style>
